<template>
    <div>
        <van-nav-bar title="标题" left-text="返回" right-text="编辑" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" v-show="!showw" />
        <van-nav-bar title="标题" left-text="返回" right-text="完成" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight1" v-show="showw" />
        <van-checkbox-group v-model="checked" ref="checkboxGroup">
            <van-checkbox :name="item.shop_id" @click="danxuan" v-for="item in responseData">
                <van-card :price="item.shop_proPrice" :title="item.shop_proTitle" :thumb="item.shop_proImg">
                    <template #footer>
                        <van-stepper v-model="item.shop_proCount" theme="round" button-size="22" disable-input />
                    </template>
                </van-card>
            </van-checkbox>
        </van-checkbox-group>
        <van-submit-bar :price="double" button-text="提交订单" @submit="onSubmit" placeholder v-show="showw">
            <van-checkbox v-model="checked1" @click="quanxuan">全选</van-checkbox>
        </van-submit-bar>

    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref, watch, computed } from 'vue';
import { lookcart } from '@/api/http';
const onClickLeft = () => history.back();
const checked = ref([]);
const checked1 = ref(false);
let checkboxGroup = ref();
const showw = ref(false);
let sum = ref(0)
const onSubmit = () => {

};

// 全选 
let quanxuan = () => {
    if (checked1.value == true) {
        checked.value.length = responseData.value.length
        checkboxGroup.value.toggleAll(true);
        // sum.value = 0
        console.log(777777777777, checked.value.length);
        console.log(8888, responseData.value.length);

    } else if (checked1.value == false) {
        checkboxGroup.value.toggleAll();
        sum.value = 0
        checked.value.length = 0
    }
};
// 单选
const danxuan = () => {
    if (checked.value.length == responseData.value.length) {
        checked1.value = true
        sum.value = 0
    } else {
        checked1.value = false
        sum.value = 0
    }
};

// 计算金钱的代码

const double: any = computed(() => {
    checked.value.forEach((item: any) => {
        responseData.value.forEach((item1: any) => {
            if (item == item1.shop_id) {
                sum.value += item1.shop_proCount * item1.shop_proPrice
            }
        })
    })
    return sum.value * 100
})


const responseData = ref()
// 打开模态框
const onClickRight = () => { showw.value = true };
// 关闭模态框
const onClickRight1 = () => { showw.value = false };
onMounted(() => {
    lookcart({ shop_userCode: localStorage.getItem('user_code') }).then((res: any) => {
        console.log('购物车列表', res);
        responseData.value = res.responseData
    })
})


</script>
<style lang="scss">
#app {
    margin: 0;
    padding: 0;
    position: relative;

    .van-submit-bar {
        position: fixed;
        bottom: 3rem;
    }

    .van-checkbox-group {
        width: 100%;

        .van-checkbox {
            width: 100%;
            margin-bottom: 1rem;

            .van-checkbox__label {
                flex: 1;
            }
        }

        .van-checkbox:last-child {
            margin-bottom: 6rem;
        }
    }


}
</style>